<template>
<!--  <el-card>-->
  <div class="wrap">
    <div class="left">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
        <el-row type="flex">
          <el-col>
            <el-form-item label="计划巡检名称：" prop="name" >
              <el-input v-model="form.name" :disabled="!editVisible&&!addVisible"></el-input>
            </el-form-item>
            <el-form-item label="巡检计划开始时间：" prop="plan_start_at">
              <el-date-picker
                :disabled="!editVisible&&!addVisible"
                v-model="form.plan_start_at"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="巡检计划结束时间：" prop="plan_end_at">
              <el-date-picker
                v-model="form.plan_end_at"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :disabled="!editVisible&&!addVisible"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="重复周期:" prop="circle_unit">
              <el-col class="line" :span="2">每</el-col>
              <el-col :span="8">
                <el-select v-model="form.circle_unit" placeholder="请选择周期" :disabled="!editVisible&&!addVisible">
                  <el-option label="月" value="month"></el-option>
                  <el-option label="周" value="week"></el-option>
                  <el-option label="日" value="day"></el-option>
                </el-select>
              </el-col>

              <el-col :span="8">
                <el-input type="number" :disabled="!editVisible&&!addVisible" v-model="form.circle_count" placeholder="循环次数"></el-input>
              </el-col>
              <el-col class="line" :span="6">次创建巡检任务</el-col>
            </el-form-item>

            <el-form-item label="巡检任务计划时间：" prop="plan_at">
              <el-time-picker
                v-model="form.plan_at" value-format="HH:mm:ss" :disabled="!editVisible&&!addVisible">
                placeholder="00:00:00">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="指派设置：" prop="polling_user_id">
              <PrincipalSelect :disabled="!editVisible&&!addVisible" :limit="false" v-model="form.polling_user_id" placeholder="请选择巡检 负责人"></PrincipalSelect>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="margin:30px;display: flex;justify-content: center; align-items:center;height: 60vh">
            <el-divider direction="vertical"></el-divider>
          </el-col>
          <el-col>
            <el-form-item label="客户:" prop="polling_customer_name">
              <el-autocomplete :disabled="!editVisible&&!addVisible" v-model="form.polling_customer_name" :fetch-suggestions="querySearchAsync" class="w-full"
                               placeholder="搜索客户" value-key="name" @select="handleSelect" clearable
                               @clear="clearCustomer"></el-autocomplete>
            </el-form-item>

            <el-form-item label="联系人:" prop="polling_customer_user_name">
              <div style="display: flex;justify-content: space-between" class="contact_nameWrap">
                <el-select v-model="form.polling_customer_user_name" class="ele-block" clearable placeholder="请选择联系人"
                           :disabled="!editVisible&&!addVisible"
                           @change="changeContact">
                  <el-option
                    v-for="(item, index) in contact_nameList"
                    :key="index"
                    :label="item.name"
                    :value="item.name+'-'+item.phone"
                  />
                </el-select>
                <el-button style="margin-left: 10px" type="primary" @click="addCustomerUser" :disabled="!form.polling_customer_id&&!this.editVisible">
                  新建
                </el-button>
              </div>
            </el-form-item>

            <el-form-item label="联系电话:" prop="polling_customer_user_telephone">
              <el-input
                disabled
                v-model="form.polling_customer_user_telephone"
                clearable
                placeholder=""/>
            </el-form-item>
            <el-form-item label="详细地址:" prop="polling_customer_address">
              <el-input
                disabled
                v-model="form.polling_customer_address"
                clearable
                placeholder=""/>
            </el-form-item>
            <el-form-item label="任务描述:" prop="polling_description">
              <el-input
                type="textarea"
                :rows="7"
                :disabled="!editVisible&&!addVisible"
                v-model="form.polling_description"
                clearable
                placeholder="请输入任务描述"/>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
    </div>
    <addContact
      ref="AddConcat"
      :visible.sync="showCustomerUserEdit"
      @done="reset"
    />
  </div>
<!--  </el-card>-->
</template>
<script>
import {mapGetters} from "vuex";
import PrincipalSelect from "@/views/project/task/components/PrincipalSelect.vue";
import addContact from "@/views/workTickets/workTickets/addWorkTicket/compoments/addContact.vue";
export default {
  props:['info','editVisible','addVisible'],
  components:{
    PrincipalSelect,
    addContact
  },
  computed: {
    ...mapGetters(["permission"])
  },
  data() {
    const checkCycle = (rule, value, callback) => {
      if (this.form.circle_unit && this.form.circle_count) {
        callback()
      } else {
        callback(new Error('请选择周期'));
      }
    }
      const checkCustomer = (rule, value, callback) => {
      if (this.form.polling_customer_id) {
        callback()
      } else {
        callback(new Error('请选择客户'));
      }
    };
    return {
      polling_customer_user_id:'',
      polling_customer_user_name:'',
      form: {},
      contact_nameList:[],
      //新增联系人
      showCustomerUserEdit: false,
      rules: {
        name: [
          {required: true, message: '请输入计划巡检名称', trigger: 'blur'},
        ],
        circle_unit: [
          {required: true, validator: checkCycle, trigger: 'change'},
        ],
        plan_start_at: [
          { required: true, message: '请选择巡检计划开始时间', trigger: 'change'}
        ],
        plan_end_at: [
          { required: true, message: '请选择巡检计划结束时间', trigger: 'change'}
        ],
        plan_at: [
          { required: true, message: '请选择巡检任务计划时间', trigger: 'change'}
        ],
        polling_user_id: [
          {type: 'date', required: true, message: '请选择巡检负责人', trigger: 'change'}
        ],
        polling_customer_name: [
          {required: true, validator: checkCustomer, trigger: 'change'}
        ],
      }
    };
  },
  watch: {
      info(){
            if(Object.keys(this.info).length){
            this.form = this.info
            this.$forceUpdate()
          }
      },
  },
  mounted() {

  },
  methods: {
    onSubmit() {
      let flag = false
      this.$refs['form'].validate((valid) => {
        if (valid) {
          flag=true
        } else {
          flag=false
        }
      });
      return flag
    },
    //清除客户
    clearCustomer() {
      this.contact_nameList = []
      this.form.polling_customer_user_name = ''
      this.form.polling_customer_user_telephone = ''
      this.form.polling_customer_address = ''
      this.$forceUpdate()
    },
    changeContact(item) {
      this.form.polling_customer_user_name = item.split('-')[0]
      this.form.polling_customer_user_telephone = item.split('-')[1]
      this.$forceUpdate()
    },
    //新增联系人
    addCustomerUser() {
      this.$refs.AddConcat.form.customer_id=this.form.polling_customer_user_id
      this.$refs.AddConcat.form.customer_name=this.form.polling_customer_name
      this.showCustomerUserEdit = true

    },
    //添加联系人之后
    reset(res) {
      this.contact_nameList.push({name: res.name, phone: res.phone})
      this.form.polling_customer_user_telephone = res.phone
      this.form.polling_customer_user_name = res.name
      this.$forceUpdate()
    },
    querySearchAsync(query, cb) {
      this.$http.get("customers", {
        params: {
          keyword: query,
          page: 1,
          limit: 10
        }
      }).then((res) => {
        cb(res.data.data);
      });

    },
    //选择客户
    handleSelect(item) {
      this.form.polling_customer_id = item.id
      this.form.polling_customer_user_id = item.customer_user_id
      this.polling_customer_user_id = item.customer_user_id
      this.contact_nameList = []
      let defaultConcat = null
      this.$forceUpdate();
      this.form.polling_customer_address = item.detail_address
      if (item.users.length != 0) {
        this.contact_nameList = item.users.map((item) => {
          return {name: item.name, phone: item.phone}
        })
        //选择客户之后渲染默认联系人
        defaultConcat = item.users.filter(item => item.is_default = true)[0]
        this.form.polling_customer_user_telephone = defaultConcat.phone
        this.form.polling_customer_user_name = defaultConcat.name
      } else {
        this.form.polling_customer_user_telephone = ''
        this.form.polling_customer_user_name = ''
      }
      if (defaultConcat) {
        this.customer_user_id = item.id
          this.polling_customer_user_name = item.name
      }
    },
  }
}
</script>
<style scoped lang="scss">
.wrap {

  .left {
    padding: 40px;
    //border-right: 2px solid #ebeef5;;
  }

  .right {
    padding: 40px;
  }

  .el-divider--vertical {
    display: inline-block;
    width: 1px;
    height: 100%; //更改竖向分割线长度
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }
}

.el-date-editor {
  width: 100%;
}
.el-autocomplete{
  width: 100%;
}
.el-select{
  width: 90%;
}
</style>
